<template>
  <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
    <a-form-model-item has-feedback label="用户名" prop="username">
      <a-input
        v-model="ruleForm.username"
        autocomplete="off"
        placeholder="请输入用户名"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item has-feedback label="密码" prop="pass">
      <a-input
        v-model="ruleForm.pass"
        type="password"
        autocomplete="off"
        placeholder="请输入密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item has-feedback label="手机号" prop="phone">
      <a-input
        v-model="ruleForm.phone"
        autocomplete="off"
        placeholder="请输入手机号"
      >
        <a-icon
          slot="prefix"
          type="mobile"
          style="color: rgba(0, 0, 0, 0.25)"
        />
      </a-input>
    </a-form-model-item>
    <a-form-model-item has-feedback label="验证码" prop="key">
      <a-row>
        <a-col :span="12">
          <a-input
            v-model="ruleForm.key"
            autocomplete="off"
            :placeholder="this.key_placeholder"
          >
            <a-icon
              slot="prefix"
              type="key"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-col>
        <a-col :span="12">
          <a-button
            type="Default"
            @click="daojishi()"
            v-show="this.button_type"
          >
            获取验证码
          </a-button>
          <a-button type="Default" disabled v-show="!this.button_type">
            获取验证码
          </a-button>
        </a-col>
      </a-row>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 15, offset: 5 }">
      <a-button
        type="primary"
        @click="submitForm('ruleForm')"
        block
        id="login_button"
      >
        注册
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  name: "register",
  components: {},
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的密码"));
      } else if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
         callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'));
      }else {
        callback();
      }
    };
    let validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的手机号"));
      }else if (/^1[3456789]\d{9}$/.test(value) == false) {
        callback(new Error("手机号格式错误"));
      } 
       else {
        callback();
      }
    };
    let validateKey = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        pass: "",
        phone: "",
        key: "",
      },
      key_placeholder: "请输入验证码",
      button_type: true,
      rules: {
        username: [{required: true,min: 6, max: 20, message: '用户名长度6-20字符', trigger: 'change'}],
        pass: [{ validator: validatePass, trigger: "change" }],
        phone: [{ validator: validatePhone, trigger: "change" }],
        key: [{ validator: validateKey, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({path: "/backstage"})
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 点击获取验证码会有倒计时，并且不能点击按钮
    daojishi() {
      var count = 5; //倒计时时间
      this.button_type = false; //按钮不可点击
      this.key_placeholder = count + "s后可重试"; //显示倒计时文案
      var times = setInterval(() => {
        this.key_placeholder = --count + "s后可重试"; //递减
        if (count <= -1) {
          // <=0 变成获取按钮
          this.key_placeholder = "请重新获取验证码";
          this.button_type = true;
          clearInterval(times);
        }
      }, 1000); //1000毫秒后执行
    },
  },
};
</script>
<style >
#login_button:hover {
  background-color: rgb(82, 82, 218);
}
</style>